/*
 * @Author: wangzhongjie
 * @Date: 2020-01-08 09:52:46
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-02-27 09:58:50
 * @Description:文章列表
 * @Email: UvDream@163.com
 */
import React, { useState, useEffect } from "react";
import { Button, Table, Modal, message } from "antd";
import Article from "../../api/article";
const { confirm } = Modal;
const ArticleList = props => {
  useEffect(() => {
    getList(page, pageSize);
    console.log("初始化");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const tableLabel = [
    {
      title: "标题",
      align: "center",
      dataIndex: "title"
    },
    {
      title: "类别",
      dataIndex: "type_name",
      align: "center"
    },
    {
      title: "作者",
      dataIndex: "user_name",
      align: "center"
    },
    {
      title: "创建时间",
      dataIndex: "add_time",
      align: "center"
    },
    {
      title: "修改时间",
      dataIndex: "modify_time",
      align: "center"
    },
    {
      title: "访问量",
      dataIndex: "view_content",
      align: "center"
    },
    {
      title: "操作",
      key: "operation",
      align: "center",
      width: 180,
      fixed: "right",
      render: item => {
        return (
          <div>
            <Button type="primary" onClick={() => tableRow(item, 0)}>
              编辑
            </Button>
            <Button
              type="danger"
              style={{ marginLeft: "10px" }}
              onClick={() => tableRow(item, 1)}
            >
              删除
            </Button>
          </div>
        );
      }
    }
  ];
  const tableRow = (item, action) => {
    console.log("点击编辑", item, action);
    if (action === 0) {
      // 编辑
      props.history.push("/index/addArticle/" + item.ID);
    } else {
      confirm({
        title: "提示",
        content: "确认是否删除此文章?",
        onOk() {
          Article.delete({ id: item.ID }).then(res => {
            console.log(res);
            if (res.code === 200) {
              message.success("删除文章成功!");
              getList();
            }
          });
        },
        onCancel() {}
      });
    }
  };
  // 表格数据
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);
  // 分页
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [totalSize, setTotalSize] = useState(100);
  const paginationChange = (page, pageSize) => {
    console.log("分页");
    console.log(page, pageSize);
    setPage(page);
    setPageSize(pageSize);
    getList(page, pageSize);
  };
  // 获取列表数据
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const getList = (page, pageSize) => {
    console.log("获取列表数据");
    console.log(page);
    setLoading(true);
    let formData = {
      page: String(page),
      page_size: String(pageSize)
    };
    Article.list(formData).then(res => {
      if (res.code === 200) {
        setLoading(false);
        setTableData(res.data.article_list);
        setTotalSize(res.data.totalSize);
      }
    });
  };

  return (
    <div className="white-bg">
      <Table
        rowKey={record => record.ID}
        columns={tableLabel}
        dataSource={tableData}
        scroll={{ x: 1500 }}
        bordered
        loading={loading}
        pagination={{
          showSizeChanger: true,
          current: page,
          pageSize: pageSize,
          total: totalSize,
          showTotal: total => {
            return `共 ${total} 条`;
          },
          onChange: paginationChange,
          onShowSizeChange: paginationChange
        }}
      />
    </div>
  );
};
export default ArticleList;
